import { memo, useState } from 'react';
import type { FC, PropsWithChildren } from 'react';
import { Steps } from 'antd';
import OrdersPreview from '@/pages/Order/components/OrdersPreview';

 const steps = [
  {
    title: '查看购物车',
    content: <OrdersPreview />,
  },
  {
    title: '确定下单',
    content: 'Second-content',
  },
  {
    title: '付款到支付宝',
    content: 'Second-content',
  },
  {
    title: '确认收货',
    content: 'Last-content',
  },
  {
    title: '评价',
    content: 'Last-content',
  },
];

const OrderPage: FC<PropsWithChildren<{}>> = () => {
  const [current, setCurrent] = useState(0);
  const next = () => {
    setCurrent(current + 1);
  };
  const prev = () => {
    setCurrent(current - 1);
  };
  return (
    <section className={'w-[1200px] p-12 m-auto min-h-screen'}>
      <section className={'bg-white rounded-2xl'}>
        <div className={'py-4 px-12'}>
          <Steps current={current}>
            {steps.map((item) => (
              <Steps.Step key={item.title} title={item.title} />
            ))}
          </Steps>
        </div>
        <div className={'border-t px-6 py-4'}>{steps[current].content}</div>
      </section>
    </section>
  );
};

export default memo(OrderPage);
